﻿@{
    ViewData["Title"] = "Add";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
            position: relative;
        }

        .form-section {
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        .bottom-buttons {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="form-section">
        <form id="mainForm" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">货主</label>
                    <div class="layui-input-block">
                        <input type="text" name="ownerOfGoods" required lay-verify="required" placeholder="请输入货主"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">到货时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="estimatedTime" class="layui-input" id="date1">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户订单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNumber" required lay-verify="required" placeholder="请输入客户订单号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">运输公司</label>
                    <div class="layui-input-block">
                        <input type="text" name="transportation" required lay-verify="required" placeholder="请输入运输公司"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-block">
                        <select id="supplierSelect" name="supplier" lay-verify="required">
                            <option value="">请选择供应商</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">预约库区</label>
                    <div class="layui-input-block">
                        <input type="text" name="reserveArea" required lay-verify="required" placeholder="请输入预约库区"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">仓库</label>
                    <div class="layui-input-block">
                        <select id="warehouseSelect" name="warehouse" lay-verify="required">
                            <option value="">请选择仓库</option>
                            <option value="1">仓库1</option>
                            <option value="2">仓库2</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单类型</label>
                    <div class="layui-input-block">
                        <select name="orderType" lay-verify="required">
                            <option value="type1">类型1</option>
                            <option value="type2">类型2</option>
                            <option value="type3">类型3</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验收人</label>
                    <div class="layui-input-block">
                        <input type="text" name="acceptanceTaker" required lay-verify="required" placeholder="请输入验收人"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="bottom-buttons">
                    <button type="button" class="layui-btn" id="submitButton">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="reset()">返回</button>
                </div>
            </div>
        </form>
    </div>

    <div class="form-section">
        <button id="addRowButton" class="layui-btn">新增行</button>
        <table id="subTable" lay-filter="subTable"></table>
    </div>

    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.all.js"></script>

    <script>
        layui.use(['table', 'form', 'laydate'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;

            // 存储所有新增行的数据
            var rowDataList = [];

            // 日期选择器
            laydate.render({
                elem: '#date1'
            });

            // 渲染子表格
            table.render({
                elem: '#subTable',
                cols: [
                    [{
                        field: 'productCode',
                        title: '商品编码',
                        templet: function (d) {
                            return `<select lay-filter="selectProduct">
                                        <option value="">请选择</option>
                                        <option value="code1">商品1</option>
                                        <option value="code2">商品2</option>
                                    </select>`;
                        },
                        width: 160
                    },
                    {
                        field: 'age',
                        title: '数量',
                        templet: function (d) {
                            return `<input type="number" class="layui-input" />`;
                        },
                        width: 100
                    },
                    {
                        field: 'sdate',
                        title: '状态',
                        templet: function (d) {
                            return `<input type="radio" name="status_${d.LAY_TABLE_INDEX}" value="0" title="在库" checked>
                                    <input type="radio" name="status_${d.LAY_TABLE_INDEX}" value="1" title="出库">`;
                        },
                        width: 160
                    },
                    {
                        field: 'customerOrderNumber',
                        title: '客户订单号',
                        edit: 'text'
                    },
                    {
                        field: 'orderName',
                        title: '商品名称',
                        edit: 'text'
                    },
                    {
                        field: 'registrationAge',
                        title: '已登记的数量',
                        width: 120,
                        edit: 'text'
                    },
                    {
                        field: 'noRegistration',
                        title: '未收货的数量',
                        edit: 'text'
                    },
                    {
                        field: 'dateTime',
                        title: '生产日期',
                        templet: function (d) {
                            return `<input type="text" class="layui-input" onclick="layui.laydate.render({elem: this})"/>`;
                        },
                        width: 160
                    },
                    {
                        field: 'batch',
                        title: '批次',
                        edit: 'text'
                    },
                    {
                        field: 'positionOfStorage',
                        title: '储位',
                        edit: 'text'
                    },
                    {
                        field: 'pallet',
                        title: '托盘',
                        edit: 'text'
                    },
                    {
                        field: 'unit',
                        title: '单位',
                        edit: 'text'
                    },
                    {
                        field: 'listingSdate',
                        title: '是否上架',
                        templet: function (d) {
                            return `<input type="radio" name="shelf_${d.LAY_TABLE_INDEX}" value="0" title="是" checked>
                                    <input type="radio" name="shelf_${d.LAY_TABLE_INDEX}" value="1" title="否">`;
                        },
                        width: 120
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 100,
                        align: 'center',
                        toolbar: '#operationBar'
                    }
                    ]
                ],
                data: [] // 初始化为空
            });

            // 新增行操作
            $('#addRowButton').on('click', function () {
                // 获取当前表格的数据
                var currentData = table.cache['subTable'];

                // 初始化新的行数据
                var newRowData = {
                    productCode: '',
                    age: '',
                    sdate: '',
                    customerOrderNumber: '',
                    orderName: '',
                    registrationAge: '',
                    noRegistration: '',
                    dateTime: '',
                    batch: '',
                    positionOfStorage: '',
                    pallet: '',
                    unit: '',
                    listingSdate: ''
                };

                // 添加新数据到表格数据中
                currentData.push(newRowData);

                // 重新渲染表格
                table.reload('subTable', {
                    data: currentData
                });
                console.log('新增行数据:', newRowData);
            });

            // 监听工具条
            table.on('tool(subTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    layer.confirm('确定删除此行吗？', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });

            // 监听单元格编辑
            table.on('edit(subTable)', function (obj) {
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到所在行的所有数据
                var field = obj.field; // 得到字段
                console.log('编辑: ' + field + '=' + value);
            });

            // 获取供应商数据
            function loadSuppliers() {
                $.ajax({
                    url: '/PurchaseWarehousing/GetVendor',
                    type: 'GET',
                    success: function (response) {
                        var supplierSelect = $('#supplierSelect');
                        $.each(response.data, function (index, supplier) {
                            supplierSelect.append('<option value="' + supplier.id + '">' + supplier.chineseName + '</option>');
                        });
                        form.render('select'); // 重新渲染表单选择框
                    },
                    error: function (xhr, status, error) {
                        console.error('加载供应商数据失败: ' + error);
                    }
                });
            }

            // 加载供应商数据
            loadSuppliers();

            // 获取仓库数据
            function loadWarehouse() {
                $.ajax({
                    url: '/PurchaseWarehousing/GetBinLocationDefinition',
                    type: 'GET',
                    success: function (response) {
                        var warehouseSelect = $('#warehouseSelect');
                        $.each(response.data, function (index, warehouse) {
                            warehouseSelect.append('<option value="' + warehouse.id + '">' + warehouse.theLocationCode + '</option>');
                        });
                        form.render('select'); // 重新渲染表单选择框
                    },
                    error: function (xhr, status, error) {
                        console.error('加载仓库数据失败: ' + error);
                    }
                });
            }

            // 加载仓库数据
            loadWarehouse();

            // 提交逻辑
            $('#submitButton').on('click', function () {

                // 获取当前表格的数据
                var currentData = table.cache['subTable'];

                var formData = {
                    ownerOfGoods: $('input[name="ownerOfGoods"]').val(),
                    estimatedTime: $('input[name="estimatedTime"]').val(),
                    orderNumber: $('input[name="orderNumber"]').val(),
                    transportation: $('input[name="transportation"]').val(),
                    supplier: $('#supplierSelect').val(),
                    reserveArea: $('input[name="reserveArea"]').val(),
                    warehouse: $('#warehouseSelect').val(),
                    orderType: $('select[name="orderType"]').val(),
                    acceptanceTaker: $('input[name="acceptanceTaker"]').val(),
                    rowDataList: currentData // 获取所有新增行的数据
                };

                // 打印表单数据
                console.log('提交数据:', JSON.stringify(formData));

                // AJAX提交
                $.ajax({
                    url: '/PurchaseWarehousing/AddPurchaseWarehousing',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (response) {
                        console.log('提交成功', response);
                    },
                    error: function (xhr, status, error) {
                        console.error('提交失败', error);
                    }
                });

            });

        });

        // 返回
        function reset() {
            console.log("返回");
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    </script>
</body>

</html>
